<template>
  <div class="history-container">
      <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">搜索历史</span>
      </template>
      <template #default>
        <template v-if="isDeleteShow">
          <span @click="deleteAllSearch">全部删除</span>&nbsp;&nbsp;&nbsp;
          <span @click="isDeleteShow=false">完成</span>
        </template>
        <van-icon name="delete" @click="isDeleteShow=true" v-else></van-icon>
      </template>
    </van-cell>

    <van-cell :title="item" v-for="(item,index) in searchHistoryArray" :key="index" @click="onSearchClick(item,index)">
      <template #default>
        <van-icon name="close" v-show="isDeleteShow"></van-icon>
      </template>
    </van-cell>

  </div>
</template>
<script>

export default {
  name: 'SearchHistory',
  props: {
    searchHistoryArray: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDeleteShow: false
    }
  },
  // watch: {
  //   // searchHistoryArray:{
  //   //   handler:function(){},
  //   //   deep:true,
  //   //   immediate:true
  //   // }
  //   searchHistoryArray: function () {
  //     console.log(123)
  //   }
  // },
  methods: {
    onSearchClick (item, index) {
      if (this.isDeleteShow) {
        // 删除
        this.searchHistoryArray.splice(index, 1)
      } else {
        // 跳转
        console.log(123)
        this.$emit('my-click', item)
      }
    },
    deleteAllSearch () {
      // this.searchHistoryArray = [] //这样写直接改变了数组的地址，违背了单向数据流的原则
      // 这样写不会改变数组的地址
      // this.searchHistoryArray.splice(0, this.searchHistoryArray.length)
      // 这种写法，数据是变了，但是不会改变视图，数据不是响应式的
      // Vue 不能检测以下数组的变动：\
      // 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue ---> this.$set(this.arr,索引,值) this.items[1] = 'x' // 不是响应性的 ---> this.$set(this.items,1,'x')
      // 当你修改数组的长度时，例如：vm.items.length = newLength --> this.items.splice(0,this.item.length)
      // this.searchHistoryArray.length = 0//这样写 数组的地址没有变，但是vue当中这样操作会导致数据不是响应式（数据变了，不会更新视图）

      this.searchHistoryArray.splice(0, this.searchHistoryArray.length)// 相当于清空数组 有一个好处 地址没有变（没有违反单向数据流的规则 并且不是通过length来清空，数据就是响应式的）还有一种方式就像视频中一样，干脆子向父传值
    }
  }
}
</script>
<style scoped lang="less">
.history-container{
  padding-top:108px;
}
</style>
